<template>
    <div class="login-container">
        <h1>商城登录</h1>
        <form @submit.prevent="handleLogin">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" v-model="username" required />
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" v-model="password" required />
            </div>
            <button type="submit">登录</button>
            <div>
                <a href="/front/register">若无账号，请进行注册</a>
            </div>
        </form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        };
    },
    methods: {
        handleLogin() {
            // 登录逻辑
            console.log('用户名:', this.username);
            console.log('密码:', this.password);
        }
    }
};
</script>

<style scoped lang="scss">
.login-container {
    max-width: 400px;
    margin: 200px auto;
    padding: 20px;
    border: 1px solid #e0e0e0; // 边框
    border-radius: 8px; // 圆角
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); // 阴影效果
    background-color: #ffffff; // 背景颜色

    h1 {
        text-align: center; // 标题居中
        color: #333; // 深色字体
        margin-bottom: 20px; // 下边距
    }

    .form-group {
        margin-bottom: 15px; // 每个表单组的下边距

        label {
            display: block; // 标签块级显示
            margin-bottom: 5px; // 标签下边距
            color: #555; // 中等深色字体
        }

        input {
            width: 100%; // 输入框宽度100%
            padding: 10px; // 内边距
            border: 1px solid #ccc; // 边框颜色
            border-radius: 4px; // 圆角
            font-size: 16px; // 字体大小
            transition: border-color 0.3s; // 边框颜色过渡

            &:focus {
                border-color: #3f51b5; // 聚焦时边框颜色
                outline: none; // 去掉默认轮廓
            }
        }
    }

    button {
        width: 100%; // 按钮宽度100%
        padding: 10px; // 内边距
        background-color: #3f51b5; // 按钮背景颜色
        color: white; // 按钮字体颜色
        border: none; // 去掉边框
        border-radius: 4px; // 圆角
        font-size: 16px; // 字体大小
        cursor: pointer; // 鼠标指针样式
        transition: background-color 0.3s; // 背景颜色过渡

        &:hover {
            background-color: #5c6bc0; // 悬停时背景颜色
        }
    }

    a {
        display: block; // 链接块级显示
        text-align: center; // 链接居中
        margin-top: 15px; // 上边距
        color: #3f51b5; // 链接颜色
        text-decoration: none; // 去掉下划线

        &:hover {
            text-decoration: underline; // 悬停时下划线
        }
    }
}
</style>